<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabChange="changeTab"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current="tabIndex" :style="{height: swiperHeight+'px'}" @change="tabChange">
				<block v-for="(tab,index) in newList" :key="index">
					<swiper-item>
						<scroll-view class="list" scroll-y="true">
							<template v-if="tab.list.length>0">
								<block v-for="(item,index) in tab.list" :key="index">
									<topic-list :item="item"></topic-list>
								</block>
							</template>
							<template v-else>
								<!-- 封装无数据的组件 -->
								<nothing></nothing>
							</template>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import nothing from '../../components/common/nothing.vue'

	export default {
		components: {
			swiperTabHead,
			nothing
		},
		data() {
			return {
				//设置swiper的高度
				swiperHeight: 1000,
				//选项卡中的数据
				newList: [{
						list: [
							{
								topicPic: "../../static/demo/topicpic/13.jpeg",
								topicName: "忆往事，敬余生",
								topicDescription: "面试官:在电梯里巧遇马云你会做什么?90后女孩的向答当场被录用",
								totalNum: 545,
								todayNum: 720
							},
							{
								topicPic: "../../static/demo/topicpic/14.jpeg",
								topicName: "你亲身经历的灵异事件",
								topicDescription: "走出去,才发现你跟别人差的不是一点半点",
								totalNum: 577,
								todayNum: 821
							},
							{
								topicPic: "../../static/demo/topicpic/9.jpeg",
								topicName: "天天大卡",
								topicDescription: "120斤到85斤 我的反转人生",
								totalNum: 507,
								todayNum: 707
							},
							{
								topicPic: "../../static/demo/topicpic/12.jpeg",
								topicName: "520纪念日",
								topicDescription: "春风十里，不如见你",
								totalNum: 1314,
								todayNum: 520
							},
							{
								topicPic: "../../static/demo/topicpic/11.jpeg",
								topicName: "睡在我上铺的姐妹",
								topicDescription: "愿我们友谊地久天长！！",
								totalNum: 777,
								todayNum: 589
							},
							{
								topicPic: "../../static/demo/topicpic/4.jpeg",
								topicName: "旅游",
								topicDescription: "人生在世，怎能不来场痛快的旅游呢？",
								totalNum: 1000,
								todayNum: 889
							},
							{
								topicPic: "../../static/demo/topicpic/15.jpeg",
								topicName: "水果PHOTO",
								topicDescription: "比一比大家拍的水果PHOTP吧",
								totalNum: 1000,
								todayNum: 889
							},
							{
								topicPic: "../../static/demo/topicpic/3.jpeg",
								topicName: "我的夏威夷男孩",
								topicDescription: "夏威夷的风吹到了中国，却留不下四海为家的孩子——交叉点",
								totalNum: 323,
								todayNum: 119
							}
						]
					},
					{
						list: []
					}, {

						list: [] //体育
					}, {

						list: [] //热点
					}, {

						list: [] //财经
					}, {

						list: [] //娱乐
					}, {

						list: [] //本地
					}
				],
				tabIndex: 0,//默认的选项
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '本地',
					id: 'bendi'
				}]

		}
	},
	methods: {
		//滑块修改
		tabChange(event) {
			console.log(event.detail);
			this.tabIndex = event.detail.current;
		},
		//头部标签修改 
		changeTab(index) {
			this.tabIndex = index;
		}
	}
	}
</script>

<style>
	/* tab bar */

	.uni-tab-bar .list {
		width: 750rpx;
		height: 100%;
	}

	.swiper-tab-list text {
		color: #969696;
		font-weight: bold;
	}



	.active .swiper-tap-line {
		width: 70rpx;
		border-top: 6rpx solid #FEDE33;
		border-bottom: 6rpx solid #FEDE33;
		margin: -37rpx auto;
		border-radius: 15%;
	}

	.swiper-box {
		flex: 1;
		/* height: 2600rpx !important; */
	}
</style>
